<template>
	<view :class="[primarySize()]">
		<view class="container flex flex-col">
			<!-- <view class="p30 flex-box">
				<view class="search_nav flex-box">
					<image src="https://admin.mosizp.cn/static/public/search.png" mode="aspectFill" class="ico24"></image>
					<input type="text" v-model="q" placeholder="请输入" class="flex-grow-1 pl15 fs28 col3" placeholder-class="cola" />
				</view>
				<view class="search_btn ml30" @click="search">搜索</view>
			</view> -->
			<view class="pt30"></view>
			<scroll-view scroll-y="true" class="flex-grow-1 scroll">
				<view class="box">
					<view class="item flex-box" v-for="(help,index2) in helps" @click="detail(help.id)">
						<view class="flex-grow-1 m-ellipsis pr30">{{help.title}}</view>
						<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico12"></image>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				q: '',
				helps:[]
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function (options) {
			
		    this.fetch()
		},
		methods: {
			search(){
				this.fetch();
			},
			fetch() {
				this.$core.get({url:'xilujob.user/help_list',data:{q: this.q},success:ret=>{
				  this.helps = ret.data;
				}});
			},
			detail(id){
			    uni.navigateTo({
			      url: '/pages/public/help_center_info?id='+id,
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	height: 100vh;
	min-height: auto;
}
.search_nav{
	width: 604rpx;
	height: 75rpx;
	background: #FFFFFF;
	border-radius: 40rpx;
	padding: 0 30rpx;
}
	.search_btn{
		line-height: 75rpx;
		color: var(--primary);
		font-size: 28rpx;
	}
	.left_scroll{
		width: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183,189,202,0.05);
		border-radius: 0rpx 15rpx 0 0rpx;
		padding-top: 10rpx;
		height: 100%;
		.left_item{
			width: 200rpx;
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			color: #555555;
			font-size: 28rpx;
			padding: 0 10rpx;
			&.active{
				color: var(--primary);
				font-weight: bold;
				background: #F4F8FB;
				position: relative;
			}
			&.active:before{
				content: '';
				width: 9rpx;
				height: 110rpx;
				background: var(--primary);
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
	.scroll{
		padding: 0 30rpx;
	}
	.box{
		width: 690rpx;
		padding: 0 30rpx 0;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-bottom: 30rpx;
		.item{
			height: 120rpx;
		}
		.item+.item{
			border-top: 1px solid #EEEEEE;
		}
	}
</style>
